<script setup lang="ts">
import { ref } from 'vue'
/**
 * 任何一个事件都有对应的事件对象事件对象:描述这个事件的
    1)如果没有实参传递，则直接定义形参接收
    2)如果有实参传递，实参用$event，形成用e
 */
const isShow = ref(false)

// 无实参传递
const toggle = (e: MouseEvent) => {
  console.log(e)
}
// 有实参传递
const toggle1 = (e: MouseEvent, a: string) => {
  isShow.value = !isShow.value
  alert(a)
  console.log(e)
}
</script>

<template>
  <div class="app-page">
    <div class="box" v-show="isShow"></div>
    <!-- 这里不用写 $event-->
    <button @click="toggle">按钮</button>
    <button @click="toggle1($event, 'text')">按钮</button>
  </div>
</template>

<style lang="css" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
